<template>
    <heading :level="1">关于</heading>
    <div>
        <span>{{ todoContent }}</span>&nbsp;
        <button @click="add">add</button>
    </div>
    <hr />
    <rate v-model="score" theme="orange" />
    <hr />
    <heading :level="2">JSX</heading>
</template>

<script setup>
import { ref, computed } from 'vue'
import Rate from '@/components/Rate.vue'
import Heading from '@/components/Heading.jsx'

let score = ref(3.5)
let todoList = ref([1])
let todoContent = computed(() => todoList.value.join(', '))

function add() {
    todoList.value.push(Math.floor(Math.random() * 10))
}
</script>

<style></style>
